Accessibility アクセシビリティ Web
Web WWWを全てのユーザーが快適且つ簡単に使用できるようにすること
さまざまな能力を持つユーザーがコンテンツにアクセスしたり、アクションを実行したりするための障壁なしに作成された Web
技術レベル
👀
どういう方法が存在するのか理解して、調べて実装できたら✅
フォーカス インジケーター Focus indicator
❌:focus、a タグ、button タグなどのoutline css削除
デフォルトのoutline cssのデザインを削除するのでなく、outline用のスタイルで上書き
フォーカス インジケーター Focus indicatorとソースの順序が違う
order cssなどで見た目上の順番と構造上の順番が違う場合ある
TODO:Grid Layoutでも変えられる？
The Dark Side of the Grid (Part 2) - Manuel Matuzović
DesktopのZoomとReflow
ブラウザで200%zoomして壊れている所無いか確認
target ターゲット UIのサイズ範囲
動き、点滅をへらす
Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold
Understanding Success Criterion 2.3.2: Three Flashes
Understanding Success Criterion 2.3.3: Animation from Interactions
Accessible Web Animation: The WCAG on Animation Explained | CSS-Tricks
詳しいらしい
Color 色 UI、contrast コントラスト
ユーザー設定で変わる
グレイスケールでも利用に支障がない
参考
アクセシビリティ  |  Web  |  Google Developers
https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML
https://developer.mozilla.org/ja/docs/Learn/Accessibility/CSS_and_JavaScript
freeeアクセシビリティー・ガイドライン — freeeアクセシビリティー・ガイドライン Ver. 202005.1 ドキュメント
Library: Accessibility resources, guides, communities, and more
accesibility系ツール作ってる所が出してる学習資料リスト
The most useful accessibility testing tools and techniques — Artem Sapegin’s Blog
アクセシビリティ_株式会社ニジボックス Katsuhito Karube - Speaker Deck
仕組み化がわかりやすかった
💯Modern CSS Upgrades To Improve Accessibility | Modern CSS Solutions
わかりやすく、学習リソースも紹介してくれているので、最初に読むのに良さそう
accrefs - Webアクセシビリティの参考資料まとめ
更新が無くなってるので必要ないかも
参加メンバーが日本のアクセシビリティ取り組んでるメンバーなので追うのが良いかも
A Complete Guide To Accessibility Tooling — Smashing Magazine
ツールの紹介
A Complete Guide To Accessible Front-End Components — Smashing Magazine
いつか見たい
Learn Website Accessibility and Audit & Fix Your Website's Accessibility Issues in this Course with Jon Kuperman
実際の操作、実装見るのにいいのでは？
How using Testing Library will help you improve the accessibility of your application - Juhana Jauhiainen
Test Web Front-endに取り組むことはは結果としてアクセシビリティ向上させるよという話